{% extends "monitor/hbase_base.html" %}
{% load extended_filter %}

{% block hbase_content %}
    <div class="row">
        <div id="sidebar" class="span1">
            <ul class="nav nav-list affix">
                <li><a href="/monitor/cluster/{{cluster.id}}/basic">SummaryMetrics</a></li>
                <li><a href="/monitor/cluster/operation/{{cluster.id}}">Overall</a></li>
                <li><strong>---------------</strong></li>
                {% for operation, metrics in tsdb_metrics.iteritems%}
                <li><a href="#{{operation}}">{{operation}}</a></li>
                {% endfor %}
            </ul>
        </div>
        <div class="span11">
        {% for operation, metrics in tsdb_metrics.iteritems %}
        <section id="{{operation}}">
        <div class="row">
            <div class="span5">
                <center>{{metrics.0.title}}</center>
                <a href="{{tsdb_url_prefix}}/#start={{start_date}}{{metrics.0.query|join:""}}&yrange=[0:]&key=out%20center%20top&wxh={{12|pic_width}}x{{metrics.0.query|pic_heigth}}" >
                    <img src="{{tsdb_url_prefix}}/q?start={{start_date}}{{ metrics.0.query|join:""}}&yrange=[0:]&key=out%20center%20top&wxh={{6|pic_width}}x{{metrics.0.query|pic_heigth}}&png" />
                </a>
            </div>
            <div class="span5">
                <center>{{metrics.1.title}}</center>
                <a href="{{tsdb_url_prefix}}/#start={{start_date}}{{metrics.1.query|join:""}}&yrange=[0:]&key=out%20center%20top&wxh={{12|pic_width}}x{{metrics.1.query|pic_heigth}}" >
                    <img src="{{tsdb_url_prefix}}/q?start={{start_date}}{{metrics.1.query|join:""}}&yrange=[0:]&key=out%20center%20top&wxh={{6|pic_width}}x{{metrics.1.query|pic_heigth}}&png" />
                </a>
            </div>
        </div>
        </section>
        {% endfor %}
        </div>
    </div>
{% endblock %}
